<template>
  <div class="yingmoo-column yingmoo-store">
    <div class="column-navbar grey">
      <h1 class="column-title">
        <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
        <span class="column-name">鹰目商城</span>
        <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
      </h1>
      <mark class="column-more">更多>></mark>
    </div>
    <div class="column-content" >
      <swiper :options="swiperOption" :not-next-tick="notNextTick" ref="ym-store">
        <swiper-slide v-for="(v,i) in swiperSlides" :key="i">
        	<a :href="v.linkurl" target="_blank">
	          <figure class="list-img"><img :src="v.imgpath" /></figure>
	          <p class="list-name" :title='v.name'>{{v.name}}</p>
	          <p class="list-price">￥<span>{{v.price}}</span></p>
          </a>
        </swiper-slide>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: "ym-store",
  data() {
    return {
    	requestAddr:this.GLOBAL.addr,
      notNextTick: true,
      swiperOption: {
        loop: true,
        grabCursor: true,
        setWrapperSize: true,
        paginationClickable: true,
        prevButton: ".swiper-button-prev",
        nextButton: ".swiper-button-next",
        slidesPerView: 5,
        slidesPerGroup: 5
      },
      swiperSlides: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function(v) {
        return {
          name: "媒体名称媒体名称媒体名称" + v,
          price: v * 99,
          imgUrl: require("@/assets/ym-index/ym-store.png")
        };
      })
    };
  },
  mounted() {
        this.getStoreList(1);
  },
  methods:{
  	getStoreList:function(adid){
	  		this.$http({
					url: this.requestAddr+'/GetJson/get/adshow?adid='+adid+'&limit=10',
					method: 'JSONP',
				    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
					jsonp: 'callbackparam'
				}).then(res => {
					/*console.log(res.data);*/
					if(res.data != null){
						this.swiperSlides = res.data;
					}
				}).catch()
		}
  }
};
</script>

<style scoped lang="less">
.swiper-container {
  padding: 0 15px;
  &:hover {
    .swiper-button-prev,
    .swiper-button-next {
      width: 20px;
      height: 40px;
      margin-top: -20px;
      background-color: rgba(0, 0, 0, 0.3);
    }
    .swiper-button-prev{
      left: 5px;
    }
    .swiper-button-next{
      right: 5px;
    }
  }
}
  .yingmoo-column .column-navbar .column-more{
    color: #999999;
    cursor: pointer;
    &:hover{
      color: #f29600;
    }
  }
.swiper-slide {
  .list-img img {
    display: block;
    margin: 20px auto;
    width: 200px;
    height: 190px;
  }
  .list-name,
  .list-price {
    font-size: 14px;
    text-align: center;
    padding-bottom: 1em;
  }
  .list-name {
    width: 234px;
    height: 10px;
    line-height: 18px;
    overflow: hidden;
    text-overflow: clip;
  }
  .list-price {
    color: red;
  }
}
.swiper-button-prev,
.swiper-button-next {
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 15px;
  background-color: transparent;
  background-size: auto;
  transition: all 0.4s;
}
.swiper-button-prev {
  left: 0;
  background-image: url(../assets/ym-index/ym-s-left.png);
}
.swiper-button-next {
  right: 0;
  background-image: url(../assets/ym-index/ym-s-right.png);
}
</style>
